<template>
  <div class="article_list">
    <ul class="article_list_header" :class="{ expand_header: isExpand }">
      <li class="first_li" @click="entireHandle">
        <button :class="{ active: currentIndex === 0 }" v-preventReClick="2000">
          全部
        </button>
      </li>
      <li
        v-for="item in props.labelList"
        :key="item.id"
        @click="toggleLabel(item.id)"
      >
        <button
          :class="{ active: item.id === currentIndex }"
          v-preventReClick="2000"
        >
          {{ item.name }}
        </button>
        <b>{{ item.count }}</b>
      </li>
    </ul>
    <span class="header_control" @click="expandHeader">
      <svg
        class="icon"
        aria-hidden="true"
        :class="{ header_control_expand: isExpand }"
      >
        <use xlink:href="#icon-zhankai"></use>
      </svg>
    </span>
    <div class="article_list_body" v-if="props.articleList !== null">
      <template v-for="item in props.articleList" :key="item.id">
        <Cover
          @click="toArticleDetail(item.id)"
          :article="item"
          :isShowIcon="false"
          pcWidth="30%"
          pcHeight="380px"
          mobileWidth="100%"
          mobileHeight="412px"
        />
      </template>
      <div style="width: 32%; height: 0" v-for="n in 3" :key="n"></div>
    </div>
    <Pagination
      @currentPageChange="currentPageChange"
      :total="props.total"
      class="pagination"
      ref="paginationRef"
    />
  </div>
</template>

<script setup>
  import { ref, watch } from 'vue'
  import { useRouter } from 'vue-router'
  import Cover from '@/components/Cover.vue'
  import Pagination from '@/components/Pagination.vue'
  let isExpand = ref(false)
  const router = useRouter()
  const props = defineProps({
    articleList: Array,
    total: Number,
    labelList: Array,
  })
  const currentIndex = ref(0) // 默认选择的标签
  const emit = defineEmits(['toggleLabel', 'entireHandle', 'currentPageChange'])
  const paginationRef = ref(null)

  watch(currentIndex, newValue => {
    if (newValue !== 0) {
      // 当newValue改变，currentPage切换为默认值
      paginationRef.value.currentPage = 1
    }
  })

  const expandHeader = () => {
    isExpand.value = !isExpand.value
  }

  const toArticleDetail = id => {
    router.push(`/article/${id}`)
  }

  const toggleLabel = id => {
    currentIndex.value = id
    emit('toggleLabel', id)
  }

  const entireHandle = () => {
    currentIndex.value = 0
    emit('entireHandle')
  }

  const currentPageChange = (currentPage, pageSize) => {
    emit('currentPageChange', currentPage, pageSize, currentIndex.value)
  }
</script>

<style lang="less" scoped>
  .article_list {
    position: relative;
    .header_control {
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 20px;
      stroke: currentColor;
      color: var(--text-bright);
      opacity: 0.8;
      svg {
        transition: transform 0.6s ease;
      }
    }
    .header_control_expand {
      transform: rotate(180deg);
    }
    .expand_header {
      overflow-y: initial !important;
      height: auto !important;
      padding-bottom: 15px;
    }
    .article_list_header {
      background-color: var(--background-secondary);
      border-radius: 15px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-bottom: 12px;
      overflow-y: hidden;
      padding-left: 24px;
      padding-right: 48px;
      --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      height: 56px;

      li {
        cursor: pointer;
        margin-right: 12px;
        &:hover {
          scale: 1.045;
          transition: scale, 0.2s linear;
        }
        button {
          background-color: var(--background-primary);
          border-top-left-radius: 6px;
          border-bottom-left-radius: 6px;
          font-size: 14px;
          line-height: 20px;
          padding-top: 8px;
          padding-bottom: 8px;
          padding-left: 12px;
          padding-right: 12px;
          text-align: center;
          white-space: nowrap;
          border: none;
          color: var(--text-bright);
        }
        b {
          background-color: var(--background-primary);
          border-top-right-radius: 6px;
          border-bottom-right-radius: 6px;
          font-size: 14px;
          line-height: 20px;
          opacity: 0.7;
          padding: 8px;
          text-align: center;
          color: var(--text-accent);
          white-space: nowrap;
        }
      }
      .first_li {
        span {
          padding: 8px 24px;
          border-radius: 6px;
        }
      }
      .active {
        --tw-ring-shadow: 0 0 #0000;
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-text-opacity: 1;
        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
          0 4px 6px -2px rgba(0, 0, 0, 0.05);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
          var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        color: rgba(255, 255, 255, var(--tw-text-opacity));
        text-shadow: 0 2px 2px rgb(0 0 0 / 50%);
      }
    }
    .article_list_body {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    .pagination {
      display: flex;
      justify-content: center;
      :deep(.el-pagination) {
        button {
          background: var(--background-primary);
          color: var(--text-bright);
          i {
            font-size: 20px;
          }
        }
        .el-pager {
          li {
            background: var(--background-primary);
            color: var(--text-bright);
            font-size: 16px;
          }
          .is-active {
            color: var(--text-accent);
          }
        }
        .el-input__wrapper {
          background-color: var(--background-secondary);
        }
        .el-input {
          outline: none;
          border-color: var(--background-secondary);
        }
      }
    }
  }
  .active {
    background: linear-gradient(
      130deg,
      rgb(36, 198, 220),
      rgb(84, 51, 255) 41.07%,
      rgb(255, 0, 153) 76.05%
    );
  }
</style>
